<template>
	<checkbox-group @change="radioChange">
		<view v-if="rtype==1" class="f-raw" :class="[rcname]">
			<label class="weui-cell weui-cell2 noafter" v-for="(item, index) in carr" :key="index">
				<view class="mr20">
					<checkbox :value="item.value" :checked="item.checked" class="weui-check" />
					<text class="iconfont f40" :class="item.checked?ricon:'icondxk'"
						:style="{color:item.checked?color||fColor:''}"></text>
				</view>
				<view :class="[bttc]">{{item.name}}</view>
			</label>
		</view>
		<view v-else-if="rtype==2">
			<label v-for="(item, index) in carr" :key="index">
				<mg-cell isr='1' :btt="item.name" :bttc='`c3 ${bttc}`' cname="p253" :last="last||index==carr.length-1">
					<view slot='ft' class="f-y-c">
						<checkbox :value="item.value" :checked="item.checked" class="weui-check" />
						<text class="iconfont f40" :class="item.checked?ricon:'icondxk'"
							:style="{color:item.checked?color||fColor:''}"></text>
					</view>
				</mg-cell>
			</label>
		</view>
	</checkbox-group>
</template>
<script>
	import MgCell from '@/components/common/mg-cell.vue'
	import utils from '@/common/utils.js'
	export default {
		components: {
			MgCell,
		},
		props: {
			value: {
				type: Array,
				default: [],
			},
			arr: {
				type: Array,
				default: [],
			},
			color: '',
			rcname: '',
			rtype: {
				type: String,
				default: '1',
			},
			bttc: {
				type: String,
				default: '',
			},
			ricon: {
				type: String,
				default: 'icondx',
			},
			last: {
				type: String,
				default: '',
			},
			rifc: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				carr: []
			}
		},
		watch: {
			arr: {
				handler(newval) {
					let a = utils.deepCopy(newval)
					a.forEach(v => {
						v.checked = false
					})
					this.carr = a
				},
				immediate: true,
			},
			getAll: {
				handler(newval) {
					for (let i in this.carr) {
						if (newval.value.findIndex(v => v == this.carr[i].value) != -1) {
							this.carr[i].checked = true
						} else {
							this.carr[i].checked = false
						}
					}
					// console.log('getAll', newval)
				},
				immediate: true,
			},
		},
		computed: {
			getAll() {
				return {
					carr: this.carr,
					value: this.value
				}
			},
		},
		methods: {
			radioChange(e) {
				this.$emit('input', e.detail.value)
				// console.log(e.detail.value, this.carr)
			}
		}
	}
</script>

<style scoped>
	.weui-cell2 {
		padding: 30rpx 0 30rpx 30rpx;
	}
</style>
